<template>
    <li v-for="(module,index) in props.tree" :key="module.menuId">
        <div class="menu" :style="{ marginLeft: `${props.index * 4}%` }">
            <a-checkbox class="checked-box-label" :value="module.menuId">{{ module.menuName }} </a-checkbox>
            <div v-if="module.children && module.children.some((e) => e.menuType == MENU_TYPE_ENUM.POINTS.value)">
                <RoleTreePoint :tree="module.children" @selectCheckbox="selectCheckbox" />
            </div>
        </div>
        <template v-if="module.children && !module.children.some((e) => e.menuType == MENU_TYPE_ENUM.POINTS.value)">
            <RoleTreeMenu :tree="module.children" :index="props.index + 1" />
        </template>
    </li>

</template>
<script setup lang="ts">
import RoleTreeMenu from './role-tree-menu.vue';
import RoleTreePoint from './role-tree-point.vue';
import { MENU_TYPE_ENUM } from '@/constants/system/menu-const';
const props = defineProps({
    tree: {
      type: Array,
      default: [],
    },
    index: {
      type: Number,
      default: 0,
    },
});
function selectCheckbox(module){
    
}
</script>